<template>
  <div class="preview">
    <div class="message-item" v-for="message in preMessages">
      <div class="header">
        <div class="icon">
          <template v-if="message.inputType == 'tool_output'">
            <img src="/icon/request.png" />
          </template>
          <template v-else-if="message.inputType == 'tool_response'">
            <img src="/icon/response.png" />
          </template>
          <template v-else-if="message.inputType == 'ai_thought'">
            <img src="/icon/analyse.png" />
          </template>
        </div>
        <div class="title">{{ inputTypeLabels[message.inputType] }}</div>
      </div>

      <template v-if="message.type == 'web'">
        <div class="web" @click="handleWeb(message)">
          <app-attachment :files="['']" type="html"></app-attachment>
        </div>
      </template>
      <template v-else>
        <app-bubble
          :content="message.content"
          :input-type="message.inputType"
          :type="message.type"
          :time="message.time"
          @end="handleEnd"
          :typing="{ setp: 40, interval: 2 }"
        >
        </app-bubble>
      </template>
    </div>

    <PreviewDialog v-model="previewDialog.show" :data="previewDialog.data" />
  </div>
</template>
<script setup>
import Section from './Section.vue'
import PreviewDialog from '../PreviewDialog.vue'

const { chatStore } = inject('/chat')
const { chatItemStore } = chatStore

const previewDialog = reactive({
  show: false,
  data: {},
})

const props = defineProps({})

const preMessages = computed(() => {
  return chatItemStore.value.state.taskId
    ? formatData(chatItemStore.value.state.taskMessages[chatItemStore.value.state.taskId])
    : []
})

function formatData(data) {
  return data?.map(item => {
    return {
      type: item.texttype,
      content: item.text,
      inputType: item.role,
    }
  })
}

const inputTypeLabels = {
  tool_output: '任务请求',
  tool_response: '任务响应结果',
  ai_thought: '任务响应结果分析',
}

const handleWeb = message => {
  previewDialog.show = true
  previewDialog.data = {
    type: 'html',
    content: message.content,
  }
}
</script>
<style lang="scss" scoped>
.preview {
  padding: 16px;
}

.message-item {
  margin-bottom: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 16px 16px 0 16px;
    .icon {
      margin-right: 8px;
      img {
        width: 26px;
        height: 26px;
        vertical-align: top;
      }
    }
  }

  .bubble {
    background-color: #fff;
  }
}

.web {
  padding: 16px;
  width: 300px;
}
</style>
